<template>
  <PageLayout class="form-container">
    <a-card>
      <div class="form-title">{{ route.query.id ? "编辑" : "新增" }}管理员</div>
      <div class="form-box w-600">
        <a-form :model="formState" :rules="rules" ref="formRef" layout="Vertical" :labelCol="{ style: { width: '80px' } }">
          <a-form-item label="账号" name="username" required>
            <a-input v-model:value="formState.username" placeholder="请输入账号" :maxlength="50" />
          </a-form-item>

          <a-form-item label="姓名" name="nickname" required>
            <a-input v-model:value="formState.nickname" placeholder="请输入密码" :maxlength="50" />
          </a-form-item>
          <a-form-item label="角色" name="roleIds" required>
            <a-select v-model:value="formState.roleIds" placeholder="请选择角色" mode="multiple" :options="roleOptions" />
          </a-form-item>
          <div class="float-right">
            <a-button type="primary" style="width: 100px" @click="save">保存</a-button>
            <a-button type="primary" style="width: 100px;margin-left:20px" v-if="route.query.id" @click="resetPwd">重置密码</a-button>
          </div>
        </a-form>
      </div>
    </a-card>
  </PageLayout>
</template>

<script setup>
import { postUserAdd, postUserUpdate, postUserDetail, postUserResetPwd } from "@/api/common";
import { useStoreCommonEnum, useStoreUser } from "@/store";
import { comfirmModal } from "@/hooks/useModal";
import { message } from "ant-design-vue";
import { onMounted } from "vue";
import { commonEncrypt } from "@/utils/common";
const storeCommonEnum = useStoreCommonEnum();
const storeUser = useStoreUser();
const route = useRoute();
const router = useRouter();
const formRef = ref(null);

const formState = reactive({
  id: "",
  roleIds: undefined,
  username: "",
  nickname: "",
  password: commonEncrypt('123456', storeUser.rsaKey),
});
const treeData = ref([]);
const roleOptions = ref([]);
const jobOptions = ref([]);

onMounted(async () => {
  roleOptions.value = await storeCommonEnum.getCommonEnum("role");
  if (route.query.id) {
    postUserDetail({ id: route.query.id }).then((res) => {
      for (let key in formState) {
        formState[key] = res.data[key];
      }

      formState.roleIds = res.data?.roleList?.map((item) => item.id);
    });
  }
});

const rules = {
  // username: [{ required: true, message: "请输入账号", trigger: "blur" }],
  // nickname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  // roleIds: [{ required: true, message: "请选择角色" }],
};

const save = () => {
  formRef.value.validate().then(() => {
    const requestUrl = formState.id ? postUserUpdate : postUserAdd;
    requestUrl({ ...formState }).then(() => {
      message.success(formState.id ? "编辑成功" : "新增成功");
      router.go(-1);
    });
  });
};
const resetPwd = () => {
  comfirmModal({
    content: "确定重置密码为123456吗？",
    onOk() {
      postUserResetPwd({ id: formState.id, password: commonEncrypt('123456', storeUser.rsaKey) }).then(() => {
        message.success("重置成功");
        tableRef.value.fetch();
      });
    },
  });
};
</script>

<style lang="less" scoped>
.btn-box {
  margin-top: 24px;
  margin-left: 130px;
  :deep(.ant-btn) {
    margin-right: 16px;
  }
}
</style>
